import { useSelector } from "react-redux";
import ChooseTypeDocumentItem from "./chooseTypeDocumentItem/ChooseTypeDocumentItem";
import DownloadLink from "../../../../../ui/downloadLink/DownloadLink";

import { ReactComponent as ApplicationIcon } from "../../../../../../assets/images/dm-application.svg";

import colors from "../../../../../../assets/styles/_colors.module.scss";
import classes from "./MessageContentItem.module.scss";

const MessageContentItem = ({
  item,
  uploaderRole,
  indexMessage,
  indexDocument,
}) => {
  const role = useSelector((state) => state.account.role);

  return (
    <div className={`${classes["request-message-file"]} pt-10 pb-10`}>
      <div
        className={`${classes["request-message-file-avatar"]} ${
          uploaderRole === 0 || uploaderRole === 1 || uploaderRole === 2
            ? classes["request-message-file-bank"]
            : classes["request-message-file-client"]
        }`}
      >
        <ApplicationIcon
          className={`${classes["request-message-file-icon"]}`}
        />
      </div>

      <div className={`${classes["request-message-file-text"]} ml-15`}>
        <span className={`${classes["request-message-file-name"]} span-title`}>
          {item.originalDocumentName}
        </span>

        <DownloadLink
          fileId={item.fileId}
          documentName={item.originalDocumentName}
          linkLabel={"Нажмите, чтобы загрузить"}
          linkStyle={{ color: colors.shadeOfGreen }}
        />
      </div>

      {(role === "HeadManager" || role === "Manager" || role === "Admin") && (
        <ChooseTypeDocumentItem
          documentTypeName={item.documentTypeName}
          fileId={item.id}
          indexMessage={indexMessage}
          indexDocument={indexDocument}
        />
      )}
    </div>
  );
};

export default MessageContentItem;